<template >
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <a-card class="common-card flex" title="能源成本及用量">
      <CostLineBar :searchInfo="searchInfo" :dictCode="dictCode"></CostLineBar>
      <PollutionConcentrationLine
      :searchInfo="searchInfo"
      :dictCode="dictCode"
      ></PollutionConcentrationLine>
      <CostPie :searchInfo="searchInfo" :dictCode="dictCode"></CostPie>
      <WaterUnitCost :searchInfo="searchInfo" :dictCode="dictCode"></WaterUnitCost>
    </a-card>
  </PageWrapper>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { PageWrapper } from '@/components/Page'
  // import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
  import CommonDateSearch from '../CommonDateSearch.vue'
  // import Icon from '@/components/Icon/Icon.vue'
  import CostLineBar from './CostLineBar.vue'
  import CostPie from './CostPie.vue'
  import PollutionConcentrationLine from './PollutionConcentrationLine.vue'
  import WaterUnitCost from './WaterUnitCost.vue'

  defineOptions({ name: 'PureWaterRedirect' })

  const searchRef = ref()
  const searchInfo = ref()
  const dictCode = 'water_science_wastewater_system'

  onMounted(async () => {
    searchRef.value.handleSearch()
  })
  const handleSearch = (params) => {
    searchInfo.value = params
  }
</script>
<style scoped lang="scss">
  .common-card {
    flex: 1;
    overflow: hidden;

    :deep(.ant-card-body) {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      padding: 4px;
      overflow: hidden;

      .chart-box {
        flex-shrink: 0;
        width: 50%;
        height: 50%;
        min-height: 240px;
        padding: 4px;
      }
    }
  }
</style>